<template>
  <div class="h5-wrapper">
    <!--
      <keep-alive>将缓存通过<router-view>渲染的当前活动组件。
      包裹了<keep-alive>的<router-view>会缓存当前路由对应的组件及其子组件，只要它们保持在<keep-alive>的作用域内。

      ::说人话就是：只要是由被keep-alive包裹的组件渲染的任意子组件都会被缓存，被渲染指的是：router-view 直接渲染的组件对象
      但是有个bug，就是所有被渲染子组件初始化过一次后就不会再刷新（从后端获取数据）
        可以通过配置 include exclude max 属性解决该问题
        include： 组件名数组，只有匹配的组件会被缓存  :include="['Layout']"
        exclude： 组件名数组，排除不需要渲染的组件
        max： 最多可以缓存多少个组件
        - 如果组件没有配置组件名，就会去匹配文件名(文件名似乎无效)

        下面 keep 只指定了 LayoutPage 但是实际上 ArticlePage 页被缓存了
        而 ArticleDetailPage 没有被缓存，所以每次进入的时候都会重新加载

        被缓存的组件会多两个生命周期钩子，分别是 actived 和 deactived
          actived  激活时，组件被看到时触发
          deactived  失活时，离开页面组件看不见时触发
        被缓存的组件相应的生命周期钩子，比如 created mounted destroyed 都不会触发了
     -->
    <keep-alive :include="keepArr">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "h5-wrapper",
  data() {
    return {
      keepArr: ['LayoutPage', 'ArticlePage']
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {
  .content {
    margin-bottom: 51px;
  }

  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: flex;
    background: #fff;
    border-top: 1px solid #e4e4e4;

    a {
      flex: 1;
      text-decoration: none;
      font-size: 14px;
      color: #333;
      -webkit-tap-highlight-color: transparent;

      &.router-link-active {
        color: #fa0;
      }
    }
  }
}
</style>
